<!--
 * Copyright © 2022
 * @Author: zhangxiang
 * @Date: 2022-11-30 19:11:42
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-26 10:00:33
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="create-network"
    :rules="rules"
    :model="form"
    label-width="110px"
    size="medium"
  >
    <el-form-item class="item" label="网络" prop="vpcId">
      <el-select
        v-model="form.vpcId"
        placeholder="请选择网络"
        style="width: 100%"
      >
        <el-option
          v-for="item in networkOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-row type="flex" justify="end">
        <el-link
          :href="
            basic.isCloudPublic
              ? '#/cn-resource/network/public'
              : '#/cn-resource/network/private'
          "
          style="line-height: 28px; margin-top: 2px"
          type="primary"
          target="_blank"
        >创建网络</el-link>
      </el-row>
    </el-form-item>
    <el-form-item class="item right" label="子网" prop="subnetId">
      <el-select
        v-model="form.subnetId"
        placeholder="请选择子网"
        no-data-text="请先选择合适的网络"
        style="width: 100%"
        :loading="loadingSubnet"
      >
        <el-option
          v-for="item in subnetOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-row type="flex" justify="end">
        <el-link
          :href="'#/cn-resource/subnet'"
          style="line-height: 28px; margin-top: 2px"
          type="primary"
          target="_blank"
        >创建子网</el-link>
      </el-row>
    </el-form-item>
    <el-form-item label="安全组" prop="nsgId">
      <el-select
        v-model="form.nsgId"
        placeholder="请选择安全组"
        no-data-text="请先选择合适的网络"
        style="width: 100%"
      >
        <el-option
          v-for="item in nsgIdOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-row type="flex" align="center" class="hint">
        <i class="el-icon-info icon"></i>
        <div class="text">
          安全组类似防火墙功能，是一个逻辑上的分组，用于设置网络访问控制
        </div>
      </el-row>
    </el-form-item>
    <template v-if="basic.cloudProvider === '阿里云'">
      <el-form-item label="公网IP" prop="publicIp">
        <el-checkbox v-model="form.publicIp">分配公网IPv4地址</el-checkbox>
      </el-form-item>
      <template v-if="form.publicIp">
        <el-form-item
          class="item"
          label="带宽计费模式"
          prop="internetChargeType"
        >
          <el-radio-group
            v-model="form.internetChargeType"
            size="small"
            @input="internetChargeTypeChange"
          >
            <el-radio
              v-for="item in internetChargeTypeOptions"
              :key="item.value"
              :label="item.value"
              border
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          class="item right"
          :label="
            form.internetChargeType === '按固定带宽计费'
              ? '带宽大小'
              : '带宽峰值'
          "
          prop="internetMaxBandwidthOut"
        >
          <el-input-number
            v-model="form.internetMaxBandwidthOut"
            style="width: 160px"
            :min="1"
            :max="100"
            :precision="0"
            label="带宽"
          />
          <span style="margin-left: 5px">（1M-100M）</span>
        </el-form-item>
      </template>
    </template>
  </el-form>
</template>

<script>
import {
  queryVPC,
  queryNetwork,
  querySubnet,
  queryNsg
} from '@/api/cn-resource'
export default {
  name: 'CreateNetwork',
  components: {},
  props: {
    basic: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      internetChargeTypeOptions: [
        {
          label: '按固定带宽计费',
          value: '按固定带宽计费'
        },
        {
          label: '按使用流量计费',
          value: '按使用流量计费'
        }
      ],
      networkOptions: [],
      loadingSubnet: false,
      subnetOptions: [],
      nsgIdOptions: [],
      networkCpId: '',
      form: {
        vpcId: '', // 网络
        subnetId: '', // 子网
        nsgId: '', // 安全组
        publicIp: true, // 分配公网IP
        internetChargeType: '按固定带宽计费', // 带宽计费模式
        internetMaxBandwidthOut: 1 // 带宽大小/带宽峰值
      },
      rules: {
        vpcId: [{ required: true, message: '请选择网络', trigger: 'change' }],
        subnetId: [
          { required: true, message: '请选择子网', trigger: 'change' }
        ],
        nsgId: [{ required: true, message: '请选择安全组', trigger: 'change' }],
        publicIp: [{ required: true, message: '请选择是否分配公网IP' }],
        internetChargeType: [{ required: true, message: '请选择带宽计费模式' }],
        internetMaxBandwidthOut: [{ required: true, message: '请设置带宽' }]
      },
      vpcParam: {
        cloudProvider: this.basic.cloudProvider,
        cloudAccountName: this.basic.cloudAccountName,
        cpRegionId: this.basic.cpRegionId
      },
      networkParam: {
        cloudAccountName: this.basic.cloudAccountName,
        zone: this.basic.zone
      }
    }
  },
  computed: {},
  watch: {
    /**
     * @description: 监听basic
     * @return {*}
     */
    basic: {
      handler(newVal, oldVal) {
        if (!newVal.isCloudPublic) {
          // 私有云
          if (newVal.cloudAccountName) {
            this.networkParam.cloudAccountName = newVal.cloudAccountName
            this.networkParam.zone = newVal.zone
          }
        } else {
          // 公有云
          if (
            newVal.cloudProvider &&
            newVal.cloudAccountName &&
            newVal.cpRegionId
          ) {
            this.vpcParam.cloudProvider = newVal.cloudProvider
            this.vpcParam.cloudAccountName = newVal.cloudAccountName
            this.vpcParam.cpRegionId = newVal.cpRegionId
          }
        }
      },
      immediate: true,
      deep: true
    },
    /**
     * @description: 监听公有云中网络相关参数
     * @return {*}
     */
    vpcParam: {
      handler(newVal) {
        if (
          newVal.cloudProvider &&
          newVal.cloudAccountName &&
          newVal.cpRegionId
        ) {
          this.form.vpcId = ''
          this.form.subnetId = ''
          this.form.nsgId = ''
          if (this.basic.isCloudPublic) {
            this.getNetworkList()
          }
        }
      },
      immediate: true,
      deep: true
    },
    /**
     * @description: 监听私有云网络相关参数
     * @return {*}
     */
    networkParam: {
      handler(newVal, oldVal) {
        if (newVal.cloudAccountName) {
          this.form.vpcId = ''
          this.form.subnetId = ''
          this.form.nsgId = ''
          if (!this.basic.isCloudPublic) {
            this.getNetworkList()
          }
        }
      },
      immediate: true,
      deep: true
    },
    /**
     * @description: 网络监听
     * @return {*}
     */
    'form.vpcId': {
      handler(newVal) {
        if (newVal) {
          const networkSelect = this.networkOptions.find((item) => {
            return newVal === item.id
          })
          this.networkCpId = networkSelect ? networkSelect.cpId : ''
          this.form.subnetId = ''
          this.getSubnetList()
          this.form.nsgId = ''
          this.getNsgList()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 带宽计费模式 改变
     * @param {*} val
     * @return {*}
     */
    internetChargeTypeChange(val) {
      if (val === '按固定带宽') {
        this.form.internetMaxBandwidthOut = '1'
      } else if (val === '按使用流量') {
        this.form.internetMaxBandwidthOut = '5'
      }
    },
    /**
     * @description: 获取安全组
     * @return {*}
     */
    getNsgList() {
      queryNsg({
        cloudProvider: this.basic.cloudProvider,
        cloudAccountName: this.basic.cloudAccountName,
        network: this.networkCpId, // 阿里云所需字段
        region: this.basic.cpRegionId // 华为云所需字段
      }).then((res) => {
        this.nsgIdOptions = Array.isArray(res.data) ? res.data : []
      })
    },
    /**
     * @description: 获取子网
     * @return {*}
     */
    getSubnetList() {
      this.loadingSubnet = true
      querySubnet({
        cloudProvider: this.basic.cloudProvider,
        cloudAccountName: this.basic.cloudAccountName,
        network: this.networkCpId,
        zone: this.basic.zone
      })
        .then((res) => {
          this.subnetOptions = Array.isArray(res.data) ? res.data : []
        })
        .finally(() => {
          this.loadingSubnet = false
        })
    },
    /**
     * @description: 获取网络
     * @return {*}
     */
    getNetworkList() {
      if (this.basic.isCloudPublic) {
        // 公有云
        queryVPC({
          cloudProvider: this.basic.cloudProvider,
          cloudAccountName: this.basic.cloudAccountName,
          region: this.basic.cpRegionId
        }).then((res) => {
          this.networkOptions = Array.isArray(res.data) ? res.data : []
        })
      } else {
        // 私有云
        if (this.basic.cloudProvider === '浪潮InCloud') {
          // 浪潮云
          queryVPC({
            cloudProvider: this.basic.cloudProvider,
            cloudAccountName: this.basic.cloudAccountName
          }).then((res) => {
            this.networkOptions = Array.isArray(res.data) ? res.data : []
          })
        } else {
          // 其他私有云 目前只有Openstack
          queryNetwork({
            cloudAccountName: this.basic.cloudAccountName,
            zone: this.basic.zone
          }).then((res) => {
            this.networkOptions = Array.isArray(res.data) ? res.data : []
          })
        }
      }
    },
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          const extraForm = this.getExtraForm()
          callback({
            ...extraForm,
            ...this.form
          })
        }
      })
    },
    /**
     * @description: 获取表单参数额外展示的数据
     * @return {*}
     */
    getExtraForm() {
      // 获取networkName
      const networkSelect = this.networkOptions.find((item) => {
        return this.form.vpcId === item.id
      })
      const networkName = networkSelect ? networkSelect.name : ''
      // 获取subnetName
      const subnetSelect = this.subnetOptions.find((item) => {
        return this.form.subnetId === item.id
      })
      const subnetName = subnetSelect ? subnetSelect.name : ''
      // 获取nsgName
      const nsgIdSelect = this.nsgIdOptions.find((item) => {
        return this.form.nsgId === item.id
      })
      const nsgName = nsgIdSelect ? nsgIdSelect.name : ''
      return {
        networkName,
        subnetName,
        nsgName
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.create-network {
  .item {
    display: inline-block;
    width: calc(50% - 5px);
    &.right {
      margin-left: 10px;
    }
  }
  .hint {
    margin-top: 5px;
    .icon {
      color: #b9b9b9;
      font-size: 18px;
      margin-right: 6px;
      line-height: 18px;
    }
    .text {
      .textStyle(14px , 400, #C3C3C3);
      line-height: 20px;
    }
  }
}
</style>
